<section id="houseSharingInfo" class="ml-24 mr-24">
  <hl-page-header title="房源详情" title-color="#999"></hl-page-header>

  <div class="mt-15 pt-10">
    <div class="house-title mb-10" style="color:#929BA8">分享设置</div>
    <div class="dy-flex">
      <div class="dy-fx-1 line-height-34">
        <span class="color-999">分享标题:</span>
      </div>
      <div class="dy-fx-10 line-height-34 color-666">{{data.shareTitle}}</div>
    </div>
    <div class="dy-flex mt-5">
      <div class="dy-fx-1 line-height-34">
        <span class="color-999">分享简介:</span>
      </div>
      <div class="dy-fx-10 line-height-34 color-666">{{data.shareIntroduction}}</div>
    </div>
    <div class="dy-flex mt-5">
      <div class="dy-fx-1 line-height-34">
        <span class="color-999">分享主图:</span>
      </div>
      <div class="dy-fx-10"><img :src="data.sharePic" width="110" height="110"></div>
    </div>
  </div>

  <div class="mt-15 pt-10" v-if="data.projectInfo.projectId">
    <div class="house-title mb-10" style="color:#929BA8">推荐资源</div>
    <div class="dy-flex">
      <div class="dy-fx-1 line-height-34">
        <span class="color-999">租赁类型:</span>
      </div>
      <div class="dy-fx-10 line-height-34 color-666">{{data.contractType == 'ER' ? '整租' : '工位'}}</div>
    </div>
    <div class="dy-flex mt-5">
      <div class="dy-fx-1 line-height-34">
        <span class="color-999">推荐项目:</span>
      </div>
      <div class="dy-fx-10 line-height-34 color-666">
        {{data.projectInfo.projectName}}
      </div>
    </div>
  </div>

  <div class="units" v-if="units.length">
    <div>单元({{unitsTotal}}m²)</div>
    <div class="box-i-shadow-2 br-4 text-center">
      <div class="dy-flex gradient-color line-height-40">
        <div class="dy-fx-2">楼栋</div>
        <div class="dy-fx-2">楼层</div>
        <div class="dy-fx-8">单元</div>
      </div>
      <div class="dy-flex line-height-40 border-t" v-for="item in units">
        <div class="dy-fx-2 border-r">{{item.buildingName}}</div>
        <div class="dy-fx-2 border-r">{{item.floorNum}}</div>
        <div class="dy-fx-8">
          <a style="margin:0 3px;color:#337AB7;" v-for="item0 in item.children" @click="getUnitDetails(item0.unitId)">{{item0.unitName}}({{item0.unitAcreage}}m²)</a>
        </div>
      </div>
    </div>
  </div>

  <div class="units mt-10" v-if="data.projectInfo.wps.length">
    <div>工位({{data.projectInfo.wps.length}}个)</div>
    <div class="box-i-shadow-2 br-4 text-center">
      <div class="dy-flex gradient-color line-height-40">
        <div class="dy-fx-2">楼栋</div>
        <div class="dy-fx-2">楼层</div>
        <div class="dy-fx-2">单元</div>
        <div class="dy-fx-6">车位</div>
      </div>
      <div class="dy-flex line-height-40 border-t" v-for="item in wps">
        <div class="dy-fx-2 border-r">{{item.buildingName}}</div>
        <div class="dy-fx-2 border-r">{{item.floorNum}}</div>
        <div class="dy-fx-2 border-r">{{item.unitName}}</div>
        <div class="dy-fx-6">
          <span style="margin:0 3px;" v-for="item0 in item.children">{{item0.positionName}}</span>
        </div>
      </div>
    </div>
  </div>

  <div class="units mt-10" v-if="data.projectInfo.stops.length">
    <div>车位({{data.projectInfo.stops.length}}个)</div>
    <div class="box-i-shadow-2 br-4 text-center">
      <div class="dy-flex gradient-color line-height-40">
        <div class="dy-fx-2">楼栋</div>
        <div class="dy-fx-2">楼层</div>
        <div class="dy-fx-2">单元</div>
        <div class="dy-fx-6">车位</div>
      </div>
      <div class="dy-flex line-height-40 border-t" v-for="item in stops">
        <div class="dy-fx-2 border-r">{{item.buildingName}}</div>
        <div class="dy-fx-2 border-r">{{item.floorNum}}</div>
        <div class="dy-fx-2 border-r">{{item.unitName}}</div>
        <div class="dy-fx-6">
          <span style="margin:0 3px;" v-for="item0 in item.children">{{item0.positionName}}</span>
        </div>
      </div>
    </div>
  </div>

  <div class="mt-15 pt-10">
    <div class="house-title mb-10" style="color:#929BA8">内容介绍</div>
    <div class="dy-flex">
      <div class="dy-fx-1 line-height-34">
        <span class="color-999">内容标题:</span>
      </div>
      <div class="dy-fx-10 line-height-34 color-666">{{data.contentTitle}}</div>
    </div>
    <div class="dy-flex mt-5">
      <div class="dy-fx-1 line-height-34">
        <span class="color-999">内容详情:</span>
      </div>
      <div class="dy-fx-10 line-height-34 color-666" ref="contentInfo"></div>
    </div>
  </div>

  <div class="yx-button ptb-10 mt-15">
    <hl-button type="primary" @on-click="editHouseSharing">编辑</hl-button>
    <hl-button type="outline" @on-click="routerPreview">预览</hl-button>
  </div>
  <!-- 单元详情 -->
  <unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>
</section>

<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/rent/scripts/house_sharing_info.js" charset="utf-8"></script>
